<template>
  <div class="markSimosBox">
    <!-- 暂无课程 -->
    <div class="abouttoStart">
      <!-- banner -->
      <div class="nocourseBanner">
        <img :src="nocourseSrc" alt="" class="banner-img">
        <div class="banner-content">
          <!-- 邀请参加 start -->
          <div class="banner-invite">
            <p class="invite-title">管理员邀请您参加</p>
            <p class="invite-course">{{courseTitle}}</p>
            <div class="invite-dialog">
              <el-button class="invite-button" type="text" @click="dialogParticipate = true">参 加</el-button>
              <el-button class="invite-button" type="text" @click="dialogRefuse = true">拒 绝</el-button>
            </div>
            <p class="invite-tip">“ 教育并不是为了你生活而准备的事情，它是你一生中了无间断的一部分。”-亨利·福特</p>
          </div>
          <!-- 邀请参加 end -->
          <!-- 倒计时 -->
          <!-- <div v-if="comingSoonData.length > 0" class="banner-countdown">
            <div class="countdown-content">
              “即将开始课程：{{comingSoonData[0].courseName}}
              <span>（距离本次课程开始时间还有：<b>{{hours}}:{{minutes}}:{{seconds}}</b>）</span>”
              <router-link :to="{name:'markSimos-details',params:{id:courseID}}" class="enterCourse">进入课程</router-link>
              <p class="content-title">“ 教育并不是为了你生活而准备的事情，它是你一生中了无间断的一部分。”-亨利·福特</p>
            </div>
          </div> -->
          <!-- 倒计时 end-->
          <!-- <p v-else class="banner-title">"您当前没有加入任何课程，如需帮助请联系系统管理员 "</p> -->
        </div>
      </div>
      <!-- banner end -->
      <!-- main -->
      <div class="about-startMain">
        <!-- nav start -->
          <userNav></userNav>
          <!-- nav end-->
          
          <!-- <div class="can-sign-on"><img src="../../static/image/white-sure.png" alt="">可报名课程</div> -->
          <!-- <div class="can-sign-on">
            <router-link :to="{name:'sign-upCourse'}">
              <span><img src="../../static/image/white-sure.png" alt="">可报名课程</span>
            </router-link>
          </div> -->
        <!-- 新增导航栏 end -->

        <!-- 正在进行 -->
          <div class="course-beginBox courseDeatilsBox">
            <div class="public-header">
              <h2 class="public-header-ch">正在进行</h2>
              <p class="public-header-en">ONGOING</p>
              <div class="public-header-line"></div>
            </div>
            <div class="details-table-going">
              <table class="redTable">
                <thead>
                  <tr>
                    <!-- <th class="tableOne">开课日期</th>
                    <th class="tableTwo">开课时间</th>
                    <th class="tableThree">人数</th>
                    <th class="tableFour">课程名称</th>
                    <th class="tableFive"></th> -->
                    <th>课程名称</th>
                    <th>开课日期</th>
                    <th>开课时间</th>
                    <th>人数</th>
                    <th>管理操作</th>
                  </tr>
                </thead>
                <tbody id="ongoing-tbody">
                  <tr v-if="ongoingData.length==0">
                    <td colspan="5" class="no-content">尚无课程信息</td>
                  </tr>
                  <tr v-for="item in ongoingData" :key="item.courseId">
                    <td>{{item.courseName}}</td>
                    <td>{{item.startTime.split(' ')[0]}}</td>
                    <td>{{item.startTime.split(' ')[1]}}</td>
                    <td>{{item.numberOfPeople}}</td>
                    <td>
                      <router-link :to="{name:'markSimos-details',params:{id:item.courseId}}" class="detail">
                        <span> <img src="../../static/image/course-detail.png" alt=""> 课程详情</span>
                      </router-link>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!-- page -->
              <el-pagination   v-show="ongoingTotal!=0"  background layout="prev, pager, next" :total="ongoingTotal" @current-change="loadOngoing"></el-pagination>
            <!-- page end-->
          </div>        
        <!-- 正在进行 end-->

        <!-- 即将开始 -->
          <div class="course-beginBox courseDeatilsBox">
            <div class="public-header">
              <h2 class="public-header-ch">即将开始</h2>
              <p class="public-header-en">COMING SOON</p>
              <div class="public-header-line"></div>
            </div>
            <div class="details-table-begin">
              <table>
                <thead>
                  <tr>
                    <!-- <th class="tableOne">开课日期</th>
                    <th class="tableTwo">开课时间</th>
                    <th class="tableThree">人数</th>
                    <th class="tableFour">课程名称</th>
                    <th class="tableFive"></th> -->
                    <th>课程名称</th>
                    <th>开课日期</th>
                    <th>开课时间</th>
                    <th>人数</th>
                    <th>管理操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-if="comingSoonData.length ==0">
                    <td colspan="5" class="no-content">尚无课程信息</td>
                  </tr>
                  <tr v-for="item in comingSoonData" :key="item.id">
                    <td>{{item.courseName}}</td>
                    <td>{{item.startTime.split(' ')[0]}}</td>
                    <td>{{item.startTime.split(' ')[1]}}</td>
                    <td>{{item.numberOfPeople}}</td>
                    <td>
                      <router-link :to="{name:'markSimos-details',params:{id:item.courseId}}" class="detail">
                        <span> <img src="../../static/image/course-detail.png" alt=""> 课程详情</span>
                      </router-link>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!-- page -->
              <el-pagination v-show="comingSoonTotal!=0" background layout="prev, pager, next" :total="comingSoonTotal" @current-change="comingSoonCourse"></el-pagination>
            <!-- page end-->
          </div>     
        <!-- 即将开始 end-->

        <!-- 已完成 -->
          <div class="course-beginBox courseDeatilsBox">
            <div class="public-header">
              <h2 class="public-header-ch">已完成</h2>
              <p class="public-header-en">COMPLETED</p>
              <div class="public-header-line"></div>
            </div>
            <div class="details-table-gone">
              <table>
                <thead>
                  <tr>
                    <!-- <th class="tablea">开课日期</th>
                    <th class="tableb">开课时间</th>
                    <th class="tablec">人数</th>
                    <th class="tabled">课程名称</th>
                    <th class="tablee">名次</th>
                    <th class="tablef"></th> -->
                    <th>课程名称</th>
                    <th>开课日期</th>
                    <th>开课时间</th>
                    <th>人数</th>
                    <th>名次</th>
                    <th>管理操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-if="completedData.length == 0">
                    <td colspan="6" class="no-content">尚无课程信息</td>
                  </tr>
                  <tr v-for="(item,index) in completedData" :key="index">
                    <td>{{item.courseName}}</td>
                    <td>{{item.startTime.split(' ')[0]}}</td>
                    <td>{{item.startTime.split(' ')[1]}}</td>
                        <!-- <td>{{item.startTime | timeToYMD}}</td>
                        <td>{{item.startTime | timeToYMD}}</td> -->
                    <td>{{item.numberOfPeople}}</td>
                    <td>{{item.rank}}</td>
                    <td>
                      <router-link :to="{name:'markSimos-details',params:{id:item.courseId}}" class="detail">
                        <span> <img src="../../static/image/course-detail.png" alt=""> 课程详情</span>
                      </router-link>
                      <!-- <router-link :to="{name:'markSimos-details',params:{id:item.courseId}}">课程详情</router-link> -->
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!-- page -->
              <el-pagination v-show="completedTotal!=0" background layout="prev, pager, next" :total="completedTotal" @current-change="completedCourse"></el-pagination>
            <!-- page end-->
          </div>        
        <!-- 已完成 end-->
      </div>
      <!-- main end-->
    </div>
    <!-- 暂无课程 end-->

    <!-- 参加 Dialog-->
    <el-dialog class="participate"
      title="管理员邀请您参加"
      :visible.sync="dialogParticipate">
      <div class="participate-course">
        <p v-for="participate in participateList" :key="participate.index"><span>{{participate.time}}</span><span>{{participate.courseName}}</span></p>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="dialogParticipate = false">前往列表</el-button> -->
        <router-link :to="{name:'admin-inviteCourse'}" class="participate-return">前往列表</router-link>
      </span>
    </el-dialog>
    <!-- 拒绝 Dialog-->
    <el-dialog  class="participate"
      title="你已被管理员移出"
      :visible.sync="dialogRefuse">
      <div class="participate-course">
        <p v-for="refuse in refuseList" :key="refuse.index"><span>{{refuse.time}}</span><span>{{refuse.courseName}}</span></p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="participate-sure" type="primary" @click="dialogRefuse = false">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
    import userNav from '../components/userNav.vue'
    export default {
      components:{
        userNav:userNav
      },
      data() {
        return {
          // 参加 Dialog
          dialogParticipate: false,
          participateList:[
            {
              time:'2018年5月20日',
              courseName:'《像CEO一样思考》商战模拟 公开课',
            },
            {
              time:'2018年5月20日',
              courseName:'《像CEO一样思考》商战模拟 公开课',
            },
            {
              time:'2018年5月20日',
              courseName:'《像CEO一样思考》商战模拟 公开课',
            },
          ],
          // 拒绝 Dialog
          dialogRefuse: false,
          refuseList:[
             {
              time:'2018年5月20日',
              courseName:'《像CEO一样思考》商战模拟 公开课',
            },
             {
              time:'2018年5月20日',
              courseName:'《像CEO一样思考》商战模拟 公开课',
            },
          ],
          courseTitle:'3018年05月20日《像CEO一样思考》商战模拟  公开课',
          name:'课程列表',
          // 正在进行总条数
          ongoingTotal:0,
          // 即将开始总条数
          comingSoonTotal:0,
          // 已完成总条数
          completedTotal:0,
          // 暂无课程
          nocourseSrc:'../../static/image/banner-2.png',
          // 正在进行
          ongoingData: [],
          // 即将开始
          comingSoonData:[],
          bannerComingSoon:false,
          // 倒计时
          tmpHours: 24,
          // 倒计分
          tmpMinutes: 0,
          // 倒计秒
          tmpSeconds: 0,
          // 已完成
          completedData:[],
          // 进入ID
          courseID:''
        }
      },
      methods:{
        // 正在进行
        loadOngoing(currentPage = 1){
          let data = {
            userId :JSON.parse(sessionStorage.getItem("login")).id,
            // 当前页码
            pageNow: currentPage,
            // 每页显示数据条数
            pageSize: 5,
          }
          console.log(data)

          this.$http.sonGoingCourse(data,(successRes) => {
            console.log(successRes);
            this.ongoingData = successRes.data.myCourseList
            this.ongoingTotal = successRes.data.count
            },(errorRes)=>{
              console.log(errorRes);
          });
          
        },
        // 即将开始
        comingSoonCourse(currentPage = 1){
          let data = {
            userId :JSON.parse(sessionStorage.getItem("login")).id,
            // 当前页码
            pageNow: currentPage,
            // 每页显示数据条数
            pageSize: 5,
          }

          this.$http.scomingSoonCourse(data,(res)=>{
              // this.comingSoonData = res.data.myCourseList;
              // this.comingSoonTotal = res.data.count;
            if (res.data.myCourseList.length > 0) {
              this.bannerComingSoon = true
              this.courseID = res.data.myCourseList[0].courseId;
              this.comingSoonData = res.data.myCourseList;
              this.comingSoonTotal = res.data.count;
              // 即将开始时间
              let comingSoonTime = new Date(res.data.myCourseList[0].startTime);
              // 系统时间
              let currentTime = new Date();
              // 倒计时
              this.tmpHours = parseInt((parseInt(comingSoonTime.getTime()/1000) - parseInt(currentTime.getTime()/1000)) / 3600);
              // 初始化倒计时
              this.initTime()
            } else {
              this.bannerComingSoon = false
            }
            
          },(errRes)=>{
            console.log(errRes);
          })
        },
        // 已完成
        completedCourse(currentPage = 1){
          let data = {
            userId :JSON.parse(sessionStorage.getItem("login")).id,
            // 当前页码
            pageNow: currentPage,
            // 每页显示数据条数
            pageSize: 5,
          }
          this.$http.scompletedCourse(data,(res)=>{
            this.completedData = res.data.myCourseList;
            this.completedTotal = res.data.count;
          },(errRes)=>{
            console.log(errRes);
          })
        },
        // 如果是个位数 则返回 01 等等 否则 1-9 返回的时间格式为 9:1:1 而不是 09:01:01
        isOneNumber: function (val) {
            return val < 10 ? '0' + val : val;
        },
        // 初始化倒计时
        initTime: function(){
          let $this = this; // 必须赋值给一个变量，否则无效
          // 定义计时器
          let timeHandler = setInterval(function () {
            if ($this.tmpSeconds == 0 && $this.tmpMinutes == 0 && $this.tmpHours != 0) {
              // 当分钟和秒数都为0          10:00:00
              // 小时减1 分钟和秒数为59     09:59:59
              $this.tmpSeconds = $this.tmpMinutes = 59;
              $this.tmpHours--;
            } else if ($this.tmpSeconds == 0 && $this.tmpMinutes != 0 && $this.tmpHours != 0) {
              $this.tmpSeconds = 59;
              $this.tmpMinutes--;
            } else if ($this.tmpSeconds == 0 && $this.tmpMinutes != 0 && $this.tmpHours == 0) {
              $this.tmpSeconds = 59;
              $this.tmpMinutes--;
            } else if ($this.tmpSeconds == 0 && $this.tmpMinutes == 0 && $this.tmpHours == 0) {
              $this.tmpSeconds = 0;       // 重置
              clearInterval(timeHandler); // 清楚计时器
              // alert('计数完成');
            } else {
              $this.tmpSeconds--; // 每秒减1
            }
          }, 1000);
        }
      },
      computed: {
        // data中属性发生变化 此计算属性返回的值也会变化 watch 就会侦测到
        // 小时
        hours: function () {
          return this.isOneNumber(this.tmpHours);
        },
        // 分钟
        minutes: function () {
          return this.isOneNumber(this.tmpMinutes);
        },
        // 秒数
        seconds: function () {
          return this.isOneNumber(this.tmpSeconds);
        }
      },
      watch: {
        hours: function (newValue, oldValue) {
          return this.isOneNumber(newValue);
        },
        minutes: function (newValue, oldValue) {
          return this.isOneNumber(newValue);
        },
        seconds: function (newValue, oldValue) {
          return this.isOneNumber(newValue);
        }
      },
      created(){

      },
      mounted(){
        this.loadOngoing();
        this.comingSoonCourse();
        this.completedCourse();
      }
    }
  </script>